<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书信息列表</title>
</head>
<body>

<table border="1" align="center">
    <tr>
        <th>选择</th>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
        <th>类目</th>
        <th>库存</th>
        <th>图片</th>
        <th>说明</th>
        <th>作者</th>
        <th>已售</th>
    </tr>

    <form th:action="@{/book/del}" method="post" onsubmit="return validateForm()">
        <tr th:each="b:${page.list}">
            <td>
                <input type="checkbox" th:value="${b.id}" name="ids">
            </td>
            <td th:text="${b.id}"></td>
            <td th:text="${b.name}"></td>
            <td th:text="${b.price}"></td>
            <td th:text="${b.category}"></td>
            <td th:text="${b.pnum}"></td>
            <td th:text="${b.imgurl}"></td>
            <td th:text="${b.description}"></td>
            <td th:text="${b.author}"></td>
            <td th:text="${b.sales}"></td>
        </tr>
        <input type="submit" value="删除" style="margin-left: 500px" onsubmit="return validateForm()">
    </form>
</table>
<br>
<div style="width:580px;margin: auto">
    总的页数：<span th:text="${page.pages}"></span>,
    总的记录数：<span th:text="${page.total}"></span>,
    当前页的记录数：<span th:text="${page.size}"></span>,
    当前页：<span th:text="${page.pageNum}"></span>
    &nbsp;



    <span th:if="${page.hasPreviousPage}">
        <a th:href="@{/book/page(pageNum=${page.pageNum - 1})}"><<</a>
    </span>

    <span th:each="p:${#numbers.sequence(1,page.pages)}">
        <a th:href="@{/book/page(pageNum=${p})}" th:text="${p}"></a>
    </span>

    <span th:if="${page.hasNextPage}">
        <a th:href="@{/book/page(pageNum=${page.pageNum+1})}">>></a>
    </span>
</div>

</body>

<script src="/js/jquery-1.8.3.min.js"></script>

<script>
    function validateForm() {
        if ($("input[name='ids']:checked").length == 0) {
            alert("必须选择一个");
            return false;
        }
        if (confirm("确定删除吗？")) {

        } else {
            alert("已取消删除")
            return false;
        }
    }
</script>

</html>